<template>
  <div class="like">
    <Card>
        <span>猜你喜欢</span>
    </Card>
    <ul>
        <li v-for="item in likeList" :key="item.id" @click="goDetail(item.id)">
            <h2>
                <img v-lazy="item.imgUrl" alt="">
            </h2>
            <h3>{{item.name}}</h3>
            <div>
                <span>￥</span>
                <b>{{item.price}}</b>
            </div>
        </li>
    </ul>
  </div>
</template>

<script>
import Card from '@/components/home/Card.vue'



export default {
    name:'Like',
    props:{
        likeList:{
            type:Array
        }
    },
    components:{
        Card,
    },
    methods:{
        goDetail(id){
            this.$router.push({
                path:'/detail',
                query:{
                    id
                }
            })
        },
    },
    data(){
        return{
            // likeList:[
            //     {
            //         id:1,
            //         imgUrl:'./images/like1.jpeg',
            //         name:'素羊肉串辣条面筋串串香豆制品',
            //         price:'5.80'
            //     },
            //     {
            //         id:2,
            //         imgUrl:'./images/like2.jpeg',
            //         name:'玩爆全球爆米花微波炉奶味120克50包',
            //         price:'110.00'
            //     },
            //     {
            //         id:3,
            //         imgUrl:'./images/like3.jpeg',
            //         name:'港荣木糖蒸蛋糕整箱糖尿零食代糖健康',
            //         price:'29.90'
            //     },
            // ]
        }
    }
}
</script>

<style lang="less" scoped>
@rootsize:37.5rem;
.like{
    ul{
        display: flex;
        flex-wrap: wrap;
        li{
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 50%;
            h2{
                width: ( 176/ @rootsize);
                height: ( 176/ @rootsize);
                img{
                    width: 100%;
                    height: 100%;
                }
                //让其没加载出来的时候有背景图
                img[lazy=loading]{
                    background-color: grey  ;
                }
            }
            h3{
                padding:0 (6 / @rootsize);
                width: 95%;
                font-size: (14 /@rootsize);
                font-weight: 400;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            div{
                padding: 0 (6 / @rootsize) (10 / @rootsize);
                width: 100%;
                text-align: left;
                span{
                    font-size: (12 / @rootsize);
                    color: #ff0000;
                    font-weight: 400;
                }
                b{
                    
                    font-size: (16 / @rootsize);
                    color: #ff0000;
                }
            }
        }
    }
}

</style>